<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动作答示例</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            height: 100%;
        }
        body{
            font-family: 微软雅黑;
            display: flex;
            flex-direction: column;
            font-size: .4348rem;
            color: rgb(10, 10, 10);
        }
        ul li{
            list-style: none;
        }
        ::-webkit-scrollbar{
            /* width: 0; 解决移动端取消滚动条无效*/
            display: none;
        }
        
    </style>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/section.css">
</head>
<body>
    <!-- 
        生成一份试卷，试卷是100以内整数的加减乘除余，一共100道题，并自动做答，做答成绩为78，先做一下，用熟悉的语言编写
     -->
     <header>
        <span>自动作答示例</span>
     </header>
     <section class="section1">
        <!-- 运行页 -->
        <div class="container container1">
            <div class="top">
                <span>
                    &emsp;&emsp;程序将随机生成100个100以内的整数加、减、乘、除、余运算题目并作答。(每题1分，共100分)
                </span>
                <span>
                    
                    <form action="" style="display: flex;flex-direction: column;">
                        <span style="margin-top: .1208rem;">
                            成绩：
                            <select name="grade" id="">
                                <option style="text-align: center;" value="0">0</option>
                                <option value="1">1</option>
                                <option value="50">50</option>
                                <option value="99">99</option>
                                <option value="100">100</option>
                                <option value="78" selected>78</option>
                                <option  id="zdy" value="">自定义</option>
                            </select>
                            <input type="text" name="grade2" value="" style="display: none;font-size: .4348rem;">
                        </span>
                        
                        <br>
                        <button type="buttom">开始</button>
                    </form>
                    <script>
                        $('select').change(function(){
                            if($('select').val() === ''){
                                $('input').show()
                            }else{
                                $('input').css('display','none')
                            } 
                        })
                        $('input').change(function(){
                            var val = $('input').val()
                            if((val >= 0) && (val <= 100)){
                                console.log(val)
                                $('button').attr('disabled', false)
                                $('button').css('background-color', '#4099ff')
                            }else{
                                console.log(val)
                                $('button').attr('disabled', true)
                                $('button').css('background-color', '#bdbdbd')
                                //alert("请输入1~100有效分数")
                            }
                        })
                        /*
                        $('button').click(function(){
                            if($('input').val() == ''){
                                var val = $('select').val()
                            }else{
                                val = $('input').val()
                            }
                            
                            if((val >= 0) && (val <= 100)){
                                console.log(val)
                                
                                window.location.href='#'
                            }else{
                                console.log(val)
                                $('button').attr('disabled', true)
                                $('button').css('background-color', '#bdbdbd')
                                //alert("请输入1~100有效分数")
                            }
                        })*/
                    </script>
                    
                </span>


            </div>
            <div class="box">
                <ul id="Ul1">
                    <li style="display: flex;justify-content: space-between;">
                        <span>
                            <span>满分</span>
                            <span>100</span>
                        </span>
                        <span>
                            <span>成绩</span>
                            <span id="grade">4</span>
                        </span>
                    </li>
                    <!-- 动态插入 -->
                    
                </ul>
                <!-- <script>
                    var ul1 = document.getElementById("Ul1")
                    for(var i=1;i<=100;i++){
                        var li = document.createElement('li')
                        li.innerHTML='li'+i
                        ul1.appendChild(li)
                    }
                    
                </script> -->
            </div>
            <script src="../js/main.js"></script>
        </div>
        <!-- 详情页 -->
        <!-- <div class="container container2"> -->

        </div>
     </section>
     



     <script>
        var resetHtmlFont=()=>{
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        resetHtmlFont();
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>
